<template>
	<view class="page">
		<!-- 头部导航 -->
		<!-- <view class="headerBag">
			<image src="/static/icons/icon-Get-into@3.png" class="back" @click="goBack"></image>
			<view class="heade_c">
				<text>厂家申请</text>
			</view>
		</view> -->

		<!-- 表单内容 -->
		<view class="wrapper font15">
			<view class="inforBox">
				<!-- 店铺名称 -->
				<view class="layouts displayflex">
					<view class="label-wrapper">
						<text class="mustWrite">*</text>
						<text>店铺名称:</text>
					</view>
					<view class="input-wrapper">
						<input 
							v-model="formData.cjname" 
							type="text" 
							placeholder="请输入店铺名称" 
							maxlength="40"
						/>
					</view>
				</view>

				<!-- 发货人姓名 -->
				<view class="layouts displayflex">
					<view class="label-wrapper">
						<text class="mustWrite">*</text>
						<text>发货人姓名:</text>
					</view>
					<view class="input-wrapper">
						<input 
							v-model="formData.cjfh" 
							type="text" 
							placeholder="请输入发货人姓名" 
							maxlength="20"
						/>
					</view>
				</view>

				<!-- 发货人电话 -->
				<view class="layouts displayflex">
					<view class="label-wrapper">
						<text class="mustWrite">*</text>
						<text>发货人电话:</text>
					</view>
					<view class="input-wrapper">
						<input 
							v-model="formData.cjtel" 
							type="number" 
							placeholder="请输入发货人电话"
						/>
					</view>
				</view>

				<!-- 发货人微信 -->
				<view class="layouts displayflex">
					<view class="label-wrapper">
						<text>发货人微信:</text>
					</view>
					<view class="input-wrapper">
						<input 
							v-model="formData.cjwx" 
							type="text" 
							placeholder="请输入发货人微信"
						/>
					</view>
				</view>
			</view>

			<!-- 提交按钮 -->
			<view class="nextStep" @click="submitForm">提交</view>
		</view>
	</view>
</template>

<script>
import { manufacturerApi } from '@/api/index.js'

export default {
	data() {
		return {
			formData: {
				cjname: '', // 店铺名称
				cjfh: '',   // 发货人姓名
				cjtel: '',  // 发货人电话
				cjwx: ''    // 发货人微信
			}
		}
	},
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack()
		},

		// 表单验证
		validateForm() {
			const { cjname, cjfh, cjtel } = this.formData
			
			if (!cjname.trim()) {
				uni.showToast({
					title: '请输入厂家名称!',
					icon: 'none'
				})
				return false
			}

			if (!cjfh.trim()) {
				uni.showToast({
					title: '请输入发货人姓名!',
					icon: 'none'
				})
				return false
			}

			// 电话号码验证（固话或手机号）
			const phoneRegex = /(^(0\d{2})-(\d{8})$)|(^(0\d{3})-(\d{7})$)|(^(0\d{2})-(\d{8})-(\d+)$)|(^(0\d{3})-(\d{7})-(\d+)$)/
			const mobileRegex = /^1[3-9]\d{9}$/
			
			if (!phoneRegex.test(cjtel) && !mobileRegex.test(cjtel)) {
				uni.showToast({
					title: '请输入正确的发货人电话!',
					icon: 'none'
				})
				return false
			}

			return true
		},

		// 提交表单
		async submitForm() {
			if (!this.validateForm()) {
				return
			}

			try {
				// 获取存储的厂家信息
				const changjiaobj = uni.getStorageSync('changjiaobj')
				if (!changjiaobj) {
					uni.showToast({
						title: '请先完成前面的步骤',
						icon: 'none'
					})
					return
				}

				// 构建提交数据
				const submitData = {
					com_name: changjiaobj.comname,
					leg_name: changjiaobj.peoname,
					id_num: changjiaobj.bankNumber,
					idcard_img: changjiaobj.idFront,
					addr: changjiaobj.shopDetailAddr,
					lic_img: changjiaobj.permission,
					logo_img: changjiaobj.logo,
					account_type: changjiaobj.cardType,
					account_name: changjiaobj.bankname,
					card_num: changjiaobj.banknum,
					bank_name: changjiaobj.bank,
					apply_name: changjiaobj.bankcardname,
					apply_phone: changjiaobj.banktell,
					apply_email: changjiaobj.bankemile,
					prov_id: changjiaobj.addrIdarr[0].id,
					city_id: changjiaobj.addrIdarr[1].id,
					dist_id: changjiaobj.addrIdarr[2].id,
					fac_name: this.formData.cjname,
					contact_name: this.formData.cjfh,
					contact_tel: this.formData.cjtel,
					contact_weixin: this.formData.cjwx
				}

				// 调用API提交申请
				const result = await manufacturerApi.submitApplication(submitData)
				
				if (result.r === 0) {
					uni.showToast({
						title: result.msg,
						icon: 'success'
					})
					
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/identity/shenqing-more'
						})
					}, 2000)
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('提交申请失败:', error)
				uni.showToast({
					title: '提交失败，请重试',
					icon: 'none'
				})
			}
		}
	}
}
</script>

<style scoped>
.page {
	background-color: #f5f5f5;
	min-height: 100vh;
}

.headerBag {
	position: relative;
	height: 88rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1rpx solid #eee;
}

.back {
	position: absolute;
	left: 30rpx;
	width: 40rpx;
	height: 40rpx;
}

.heade_c text {
	font-size: 36rpx;
	font-weight: 500;
	color: #333;
}

.wrapper {
	padding: 30rpx;
}

.font15 {
	font-size: 30rpx;
}

.inforBox {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 40rpx;
}

.layouts {
	margin-bottom: 40rpx;
}

.layouts:last-child {
	margin-bottom: 0;
}

.displayflex {
	display: flex;
	align-items: center;
}

.label-wrapper {
	position: relative;
	min-width: 200rpx;
	margin-left: 30rpx;
}

.mustWrite {
	position: absolute;
	left: -20rpx;
	top: 5rpx;
	color: #ff4757;
	font-size: 28rpx;
}

.input-wrapper {
	flex: 1;
}

.layouts input {
	height: 80rpx;
	line-height: 80rpx;
	width: 100%;
	color: #4b4b4b;
	font-size: 28rpx;
	padding: 0 20rpx;
	border: 1rpx solid #e8e8e8;
	border-radius: 8rpx;
	background-color: #fafafa;
}

.nextStep {
	width: 100%;
	height: 88rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 44rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 32rpx;
	font-weight: 500;
	margin-top: 60rpx;
}

.nextStep:active {
	opacity: 0.8;
}
</style>